Enlazar menú con páginas estáticas

Hace unas semanas en los comentarios se habla de problemas al intentar añadir las páginas estáticas en el espacio del header, días más tarde haciendo unos arreglos encontré una solución que es la que Isaac está esperando, no digo que sea la más acertada o más correcta pero una solución al fin y al cabo. La idea es disponer de páginas estáticas enlazándolas con cualquier menú y que dicho menú esté ubicado en el bloque de la cabecera.

Lo primero que haremos será añadir las páginas y situarlas justo después de la cabecera en el gadget del crosscol. Recordemos que personalizamos los títulos siguiendo estos pasos más adelante lo que haremos será ocultarlas por lo que si aún no las personalizamos no es necesario añadir color ni imágenes.

A continuación buscamos los estilos de header-wrapper para dar altura a la cabecera y dejar espacio para añadir el menú (el valor es una referencia ya que la altura depende de cada cabecera)

#header-wrapper {

background:#ccc;

height: 125px;

width:860px;

margin:0 auto 10px;

border:0px solid $bordercolor;

}

Sin marcar para expandir la plantilla buscamos el bloque de la cabecera y hacemos unos pequeños cambios:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Título del blog (cabecera)'

type='Header'/>

</b:section>

</div>

Donde dice maxwidgets='1' cambiamos a maxwidgets='2' y en showaddelement='no' lo cambiamos a showaddelement='yes' eso nos dará la opción de añadir un nuevo gadget, si ya la tenemos omitimos ese paso, también cambiaremos locked='true' por locked='false' con esto último consegumos arrastrar el gadget de la cabecera a nuestro antojo.

Añadimos a continuación el menú que tenemos preparado, es decir los estilos los añadimos en la plantilla justo antes de ]]></b:skin> y el html para los enlaces en un gadget justo después de la cabecera.

Para el ejemplo añadí el menú Revolution elements pero puede ser cualquier otro.

Nos quedaría entonces el menú justo después de la cabecera ya continuación las páginas estáticas.

Lo que haremos ahora será lo siguiente, enlazaremos cada pestaña del menú con la página deseada, es muy simple, marcamos sobre una pestaña de las páginas y copiamos la url de la barra del navegador. En los enlaces del menú pegamos esa url que traemos copiada, de esa forma estamos enlazando la página que deseamos mostrar.

Una vez tenemos todos los enlaces añadidos vamos a ocultar las páginas, nos situamos en los estilos de las páginas y añadimos display:none de la siguiente forma.

#PageList1 {
display:none;
width: 100%;
}

O bien desde el mismo gadget de páginas procurando no marcar las páginas para no mostrarlas.

Y nos queda nuestro menú enlazando el mismo contenido que tendrían las páginas.